<template>
  <el-row id="business">
    <!-- 头部 -->
    <el-row :gutter="20">
      <!-- 日销售统计  -->
      <el-col :span="13">
        <el-card class="box-card1 public_card">
          <template #header>
            <div class="title">日销售统计</div>
          </template>
          <div class="card_body_txt">
            <h4>{{ dayOrderCount }}</h4>
            <span>当日销售量（个）</span>
          </div>
          <div class="card_body_txt">
            <h4>{{ dayOrderAmount }}</h4>
            <span>当日销售额（元）</span>
          </div>
          <div class="card_body_txt">
            <h4>{{ dayTotalBill }}</h4>
            <span>当日分成（元）</span>
          </div>
        </el-card>
      </el-col>
      <!-- 月销售统计 -->
      <el-col :span="11">
        <el-card class="box-card2 public_card">
          <template #header>
            <div class="title">月销售统计</div>
          </template>
          <div class="card_body_txt">
            <h4>{{ monthOrderAmount }}</h4>
            <span>当月销售量（个）</span>
          </div>
          <div class="card_body_txt">
            <h4>{{ monthOrderCount }}</h4>
            <span>当月销售额（万元）</span>
          </div>
          <div class="card_body_txt">
            <h4>{{ monthTotalBill }}</h4>
            <span>当月分成（元）</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <!-- main -->
    <el-row :gutter="20" class="main">
      <!-- 搜索栏-->
      <el-row class="search-box">
        <el-col :span="24">
          <div class="grid-content bg-purple-dark head">
            <el-form ref="form" :model="form" label-width="80px">
              <el-row :gutter="20" style="margintop: 20px">
                <el-col :span="5">
                  <el-form-item label="合作商">
                    <el-input placeholder="请输入内容" v-model="form.ownerName">
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <div class="block">
                    <el-date-picker
                      v-model="form.date1"
                      type="daterange"
                      range-separator="~"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions"
                    >
                    </el-date-picker>
                  </div>
                </el-col>
                <el-col :span="4">
                  <el-button
                    class="el-icon-search"
                    type="primary"
                    @click="onSubmit"
                    >查询</el-button
                  >
                </el-col>
              </el-row>
            </el-form>
          </div></el-col
        >
      </el-row>

      <!-- 统计数据展示 -->
      <el-row type="flex" justify="start" class="statistical">
        <el-col :span="4">
          <p>
            笔数统计：<span> {{ statisticalOrderAmount }}</span
            ><i>个</i>
          </p>
        </el-col>
        <el-col :span="4">
          <p>
            收入统计：<span> {{ statisticalOrderCount }}</span
            ><i>元</i>
          </p>
        </el-col>
        <el-col :span="4">
          <p>
            分成统计：<span> {{ statisticalTotalBill }}</span
            ><i>元</i>
          </p>
        </el-col>
      </el-row>
      <!-- 表单区域 -->
      <el-row class="table table_head">
        <el-table
          :data="partnerCollect"
          style="width: 100%"
          :header-cell-style="{ background: '#f3f6fb' }"
          :cell-style="{ border: 'none' }"
          :highlight-current-row="true"
        >
          <el-table-column prop="date" label="订单日期" width="300">
          </el-table-column>
          <el-table-column prop="ownerName" label="合作商" width="200">
          </el-table-column>
          <el-table-column prop="ratio" label="分成比例" width="200">
          </el-table-column>
          <el-table-column
            prop="orderTotalMoney"
            label="收入（元）"
            width="200"
          >
          </el-table-column>
          <el-table-column prop="orderCount" label="笔数" width="200">
          </el-table-column>
          <el-table-column prop="totalBill" label="分成金额" width="200">
          </el-table-column>
          <template #append
            >共{{ totalCount }}条记录 第 {{ currentPage }}/{{
              totalPage
            }}
            页<el-button-group class="fr">
              <el-button
                type="primary"
                class="prePage"
                ref="pageUp"
                @click="pageBack"
                :disabled="isBackDisabled"
                >上一页</el-button
              >
              <el-button
                type="primary"
                ref="pageBack"
                @click="pageUp"
                :disabled="isUpDisabled"
                >下一页</el-button
              >
            </el-button-group></template
          >
        </el-table>
      </el-row>
    </el-row>
  </el-row>
</template>

<script>
import {
  getPartnerCollect,
  getOrderAmount,
  getTotalBill,
  getOrderCount
} from '@/api/orderService'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      orderTime: dayjs(Date.now()).format('YYYY-MM-DD'), // 订单结束时间
      mondayTime: dayjs()
        .subtract(dayjs().day() ? dayjs().day() - 1 : 6, 'day')
        .format('YYYY-MM-DD'), // 当前这周第一天的时间
      oneDyaTime: dayjs(Date.now())
        .startOf('month')
        .format('YYYY-MM-DD HH:mm:ss'), // 当前时间月份的第一天具体时间
      oneDaySmall: dayjs(Date.now()).startOf('month').format('YYYY-MM-DD'), // 当前时间月份的第一天初略时间
      yearDay: dayjs().startOf('year').format('YYYY-MM-DD'), // 今年的第一天
      newTime: dayjs(Date.now()).format('YYYY-MM-DD HH:mm:ss'), // 当前具体时间
      dayOrderAmount: 0,
      dayOrderCount: 0,
      dayTotalBill: 0,
      monthOrderAmount: 0,
      monthOrderCount: 0,
      monthTotalBill: 0,
      statisticalOrderAmount: 0,
      statisticalOrderCount: 0,
      statisticalTotalBill: 0,
      isBackDisabled: false,
      isUpDisabled: false,
      form: {
        ownerName: '',
        date1: ''
      },
      partnerCollect: [],
      currentPage: 1,
      totalPage: 1,
      totalCount: 0,
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() >= Date.now() - 8.64e7
        }
      }
    }
  },
  async created () {
    const startDayTime = this.newTime.slice(0, 10) + ' 00:00:00'
    const startMonthTime = this.newTime.slice(0, 7) + '-01 00:00:00'
    const dayOrderAmount = await getOrderAmount(startDayTime, this.newTime)
    this.dayOrderAmount = dayOrderAmount
    const dayOrderCount = await getOrderCount(startDayTime, this.newTime)
    this.dayOrderCount = dayOrderCount
    const dayTotalBill = await getTotalBill(startDayTime, this.newTime)
    this.dayTotalBill = dayTotalBill

    const monthOrderAmount = await getOrderAmount(startMonthTime, this.newTime)
    this.monthOrderAmount = monthOrderAmount
    const monthOrderCount = await getOrderCount(startMonthTime, this.newTime)
    this.monthOrderCount = monthOrderCount
    const monthTotalBill = await getTotalBill(startMonthTime, this.newTime)
    this.monthTotalBill = monthTotalBill
    this.getPartnerCollect(
      this.newTime.slice(0, 7) + '-01',
      this.newTime.slice(0, 10)
    )
    this.getStatistical(startMonthTime, this.newTime)
  },
  methods: {
    async getPartnerCollect (start, end) {
      const partnerCollect = await getPartnerCollect({
        pageIndex: this.currentPage,
        pageSize: 10,
        start,
        end
      })
      this.partnerCollect = partnerCollect.currentPageRecords.map(({ date, id, nodeAmount, nodeId, nodeName, ownerName, orderCount, orderTotalMoney, ownerId, ratio, totalBill }) => {
        return {
          date,
          id,
          nodeAmount,
          nodeId,
          nodeName,
          orderCount,
          orderTotalMoney: '+' + orderTotalMoney,
          ownerId,
          ownerName,
          ratio: ratio + '%',
          totalBill: '+' + totalBill
        }
      })
      this.totalPage = partnerCollect.totalPage
      this.totalCount = partnerCollect.totalCount
    },
    // 下一页
    pageUp () {
      this.currentPage++
      this.isBackDisabled = false
      if (this.currentPage === this.totalPage) {
        this.isUpDisabled = true
      }
      this.getPartnerCollect(
        this.newTime.slice(0, 7) + '-01',
        this.newTime.slice(0, 10)
      )
    },
    // 上一页
    pageBack () {
      this.currentPage--
      if (this.currentPage === 1) {
        this.isBackDisabled = true
      }
      this.getPartnerCollect(
        this.newTime.slice(0, 7) + '-01',
        this.newTime.slice(0, 10)
      )
    },
    // 搜索合作商
    async onSubmit () {
      const start = dayjs(this.form.date1[0]).format('YYYY-MM-DD')
      const end = dayjs(this.form.date1[1]).format('YYYY-MM-DD')
      this.getPartnerCollect(start, end)
      this.getStatistical(start + ' 00:00:00', end + ' 23:59:59')
    },
    // 获取一定期限统计数据
    async getStatistical (start, end) {
      const statisticalOrderAmount = await getOrderAmount(start, end)
      this.statisticalOrderAmount = statisticalOrderAmount
      const statisticalOrderCount = await getOrderCount(start, end)
      this.statisticalOrderCount = statisticalOrderCount
      const statisticalTotalBill = await getTotalBill(start, end)
      this.statisticalTotalBill = statisticalTotalBill
    }
  }
}
</script>

<style lang="scss" scoped>
#business {
  padding: 10px 0 0 30px;
  background-color: #f8fafd;
  .main {
    margin-top: 30px;
    padding: 15px;
    background-color: #fff;
    .search-box {
      background-color: #fff;
    }
    .statistical {
      height: 50px;
      line-height: 50px;
      background-color: #fff;
      span {
        color: #ff5c62;
        margin-right: 10px;
        font-weight: 600;
      }
      i {
        font-size: 12px;
      }
    }
    .table {
      background-color: #fff;
    }
  }
}
::v-deep .el-table__append-wrapper {
  overflow: hidden;
  margin-top: 20px;
  height: 40px;
  line-height: 40px;
}
.fr {
  float: right;
  display: flex;
  justify-content: space-between;
  width: 300px;
}
.fl {
  float: left;
}
.active {
  background-color: #fff;
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 11%);
  border-radius: 7px;
  font-weight: 600;
  color: #333 !important;
}
.el-card {
  border-radius: 20px;
  padding: 20px;
}
// 卡片公共样式
.public_card {
  height: 166px;
  display: flex;
  flex-direction: column;
  ::v-deep .el-card__body {
    padding: 0 20px;
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .card_body_txt {
      h4 {
        height: 50px;
        line-height: 50px;
        font-size: 36px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
      }
      span {
        font-size: 12px;
      }
    }
  }
}
// 卡片公共头部
::v-deep .el-card__header {
  padding: 0;
  border: 0;
  display: flex;
  align-items: center;
  .title {
    font-weight: 700;
    margin-right: 10px;
  }
  span {
    font-size: 14px;
    color: #999;
    padding-top: 5px;
  }
}
// 工单统计
.box-card1 {
  background: #e9f3ff;
  background-image:url("http://likede2-admin.itheima.net/img/task.66b715b7.png");
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
  .card_body_txt {
    h4 {
      color: #072074;
      text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
    }
    span {
      color: #91a7dc;
    }
  }
}
// 销售统计
.box-card2 {
  background: #fbefe8 url("~@/assets/bgc2.png") no-repeat calc(100% - 12px) 100%;
  ::v-deep .el-card__body {
    padding: 0 40px;
    .card_body_txt {
      h4 {
        color: #ff5757;
        text-shadow: 2px 4px 7px rgb(255 99 85 / 50);
      }
      span {
        color: #de9690;
      }
    }
  }
}
</style>
